<template>
    <div class="main_home">
        <div class="r_title">
            <span class="txt1">推荐</span>
            <span class="txt2">阅读</span>
        </div>
        <div class="list">
            <nuxt-link
                v-for="(item, index) in readingList"
                :key="index"
                class="item"
                target="_blank"
                :to="getRouterLink(item)"
            >
                <div class="item_title">{{ item[titleKey] }}</div>
                <div class="item_text" v-html="item[textKey]"></div>
                <div class="time">{{ item.showtime_text }}</div>
            </nuxt-link>
        </div>
    </div>
</template>
<script>
export default {
    name: "recommendedReading",
    props: {
        readingList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        titleKey: {
            type: String,
            default: "title",
        },
        textKey: {
            type: String,
            default: "content",
        },
    },
    data() {
        return {
            getRouterLink: function (item) {
                return `/information/${item.id}.html`;
            },
        };
    },
    methods: {},
    created() {},
    mounted() {},
    watch: {},
};
</script>
<style lang="scss" scoped>
.time{
        text-align: left;
        font-size: 12px;
        color: #999999;
        padding-top: 6px;
    }
.main_home {
    width: 100%;
    background: #fff;
    padding: 30px 35px;

    .r_title {
        font-size: 18px;
        font-weight: 700;
        color: #333333;
        line-height: 12px;

        .txt1 {
            color: #fa5151;
        }
    }

    .list {
        margin-top: 27px;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f3f3f3;

        .item {
            cursor: pointer;
            flex-basis: 30%;
            padding: 27px 0 20px;
            border-right: 1px solid #f3f3f3;
            border-bottom: 1px solid #f3f3f3;
            padding-left: 50px;

            &:hover .item_title {
                color: #1c87f3;
            }

            .item_title {
                width: 269px;
                margin-bottom: 8px;
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 22px;
                //多行文本溢出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /*设置对齐模式*/
                -webkit-line-clamp: 1;
                /*设置多行的行数，示例为1行*/
            }

            .item_text {
                width: 306px;
                height: 40px;
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                line-height: 20px;
                //多行文本溢出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /*设置对齐模式*/
                -webkit-line-clamp: 2;
                /*设置多行的行数，示例为2行*/
            }

            &:nth-child(3n) {
                border-right: none;
            }

            &:nth-last-child(-n + 3) {
                border-bottom: none;
            }

            &:nth-child(3n + 1) {
                padding-left: 0;
            }
        }
    }
}

//全局a标签去掉下划线
.list {
    a {
        text-decoration: none !important;
    }
}
</style>